<template>
  <div class="areaSale-container">
    <chart-title
      title="地区营销额统计"
      @click="handleMore"
    />
    <div
      v-loading="loading"
      class="chart-container"
      style="width:100%;height:100%;min-height:200px;padding:20px 20px 0px;box-sizing:border-box;"
    >
      <div class="filter-container">
        <date-select
          ref="dateSelectRef"
          @dateChange="dateChange"
        />
      </div>
      <div
        id="areaSaleChart"
        style="width:100%;height:100%;min-height:200px;"
      />
    </div>
  </div>
</template>
<script>
import {inject, onMounted, reactive, ref, toRefs} from 'vue'
// echarts
import * as echarts from 'echarts'
import ChartTitle from './chartTitle.vue'
import DateSelect from './dateSelect.vue'
import 'echarts/map/js/china.js'
import {useRouter} from 'vue-router'

export default {
  components: {
    ChartTitle,
    DateSelect,
  },
  setup(props, context) {
    const router = useRouter()
    const api = inject('api')
    var dateSelectRef = ref(null)
    var reactiveData = reactive({
      loading: true,
      option: {
        tooltip: {
          show: true,
          trigger: 'item',
          triggerOn: 'mousemove', // mousemove、click
          padding: 8,
          borderWidth: 1,
          borderColor: '#999',
          backgroundColor: 'rgba(0,0,0,0.5)',
          textStyle: {
            color: '#fff',
            fontSize: 14,
          },
          formatter: function(e, t, n) {
            var data = e.data
            var context = `
               <div>
                   <p class="tooltip_style"><span class="tooltip_left">总营销额：</span><span class="tooltip_right">${data.value}</span></p>
               </div>
            `
            return context
          },
        },

        series: [
          {
            name: '中国',
            type: 'map',
            mapType: 'china',
            selectedMode: 'single',
            zoom: 1.4,
            roam: true, // 是否开启平游或缩放
            scaleLimit: {
              // 滚轮缩放的极限控制
              min: 1.4,
              max: 3,
            },
            label: {
              normal: {
                show: true,
                fontSize: '12',
                color: '#666',
              },
              emphasis: {
                show: true,
              },
            },
            data: [
              {
                id: 110000,

                regionCode: '110000',

                name: '北京',

                value: 0,
              },

              {
                id: 120000,

                regionCode: '120000',

                name: '天津',

                value: 0,
              },

              {
                id: 130000,

                regionCode: '130000',

                name: '河北',

                value: 0,
              },

              {
                id: 140000,

                regionCode: '140000',

                name: '山西',

                value: 0,
              },

              {
                id: 150000,

                regionCode: '150000',

                name: '内蒙古',

                value: 0,
              },

              {
                id: 210000,

                regionCode: '210000',

                name: '辽宁',

                value: 0,
              },

              {
                id: 220000,

                regionCode: '220000',

                name: '吉林',

                value: 0,
              },

              {
                id: 230000,

                regionCode: '230000',

                name: '黑龙江',

                value: 0,
              },

              {
                id: 310000,

                regionCode: '310000',

                name: '上海',

                value: 0,
              },

              {
                id: 320000,

                regionCode: '320000',

                name: '江苏',

                value: 0,
              },

              {
                id: 330000,

                regionCode: '330000',

                name: '浙江',

                value: 0,
              },

              {
                id: 340000,

                regionCode: '340000',

                name: '安徽',

                value: 0,
              },

              {
                id: 350000,

                regionCode: '350000',

                name: '福建',

                value: 0,
              },

              {
                id: 360000,

                regionCode: '360000',

                name: '江西',

                value: 0,
              },

              {
                id: 370000,

                regionCode: '370000',

                name: '山东',

                value: 0,
              },

              {
                id: 410000,

                regionCode: '410000',

                name: '河南',

                value: 0,
              },

              {
                id: 420000,

                regionCode: '420000',

                name: '湖北',

                value: 0,
              },

              {
                id: 430000,

                regionCode: '430000',

                name: '湖南',

                value: 0,
              },

              {
                id: 440000,

                regionCode: '440000',

                name: '广东',

                value: 0,
              },

              {
                id: 450000,

                regionCode: '450000',

                name: '广西',

                value: 0,
              },

              {
                id: 460000,

                regionCode: '460000',

                name: '海南',

                value: 0,
              },

              {
                id: 500000,

                regionCode: '500000',

                name: '重庆',

                value: 0,
              },

              {
                id: 510000,

                regionCode: '510000',

                name: '四川',

                value: 0,
              },

              {
                id: 520000,

                regionCode: '520000',

                name: '贵州',

                value: 0,
              },

              {
                id: 530000,

                regionCode: '530000',

                name: '云南',

                value: 0,
              },

              {
                id: 540000,

                regionCode: '540000',

                name: '西藏',

                value: 0,
              },

              {
                id: 610000,

                regionCode: '610000',

                name: '陕西',

                value: 0,
              },

              {
                id: 620000,

                regionCode: '620000',

                name: '甘肃',

                value: 0,
              },

              {
                id: 630000,

                regionCode: '630000',

                name: '青海',

                value: 0,
              },

              {
                id: 640000,

                regionCode: '640000',

                name: '宁夏',

                value: 0,
              },

              {
                id: 650000,

                regionCode: '650000',

                name: '新疆',

                value: 0,
              },

              {
                id: 710000,

                regionCode: '710000',

                name: '台湾',

                value: 0,
              },

              {
                id: 810000,

                regionCode: '810000',

                name: '香港',

                value: 0,
              },

              {
                id: 820000,

                regionCode: '820000',

                name: '澳门',

                value: 0,
              },
            ],
          },
        ],
        visualMap: {
          // 地图图例
          show: true,
          left: 0,
          bottom: 0,
          showLabel: true,
          pieces: [
            // 根据数据大小，各省显示不同颜色
            {
              gte: 100000,
              label: '>= 100000',
              color: '#FF9623',
            },
            {
              gte: 100000,
              lt: 50000,
              label: '50000 - 100000',
              color: '#2D60C4',
            },
            {
              gte: 1000,
              lt: 50000,
              label: '1000 - 50000',
              color: '#518CFF',
            },
            {
              gte: 1,
              lt: 1000,
              label: '1 < 1000',
              color: '#A0BFFC',
            },
            {
              lt: 0,
              label: '0',
              color: '#eee',
            },
          ],
        },
      },
      filterData: {
        statisticsType: '3',
        startTime: null,
        endTime: null,
      },
    })
    const dataOperation = (data) => {
      for (var i = 0; i < data.length; i++) {
        var val = data[i].returnAmount
        var mapItem = reactiveData.option.series[0].data.find(
          (p) => p.regionCode === data[i]['provinceCode']
        )
        if (mapItem) {
          mapItem.value = val
          mapItem.label = {
            color: val > 0 ? '#fff' : '#666',
          }
        }
      }
    }
    const handleMore = () => {
      var type = dateSelectRef.value?.dateType() || '1'
      router.push({
        path: '/statistics/sale',
        query: {
          tab: 'positionView',
          type: type,
        },
      })
    }
    const dateChange = (val, bool) => {
      reactiveData.filterData.startTime = val[0]
      reactiveData.filterData.endTime = val[1]
      if (bool) {
        chartDataRefresh()
      }
    }
    const chartDataRefresh = async() => {
      var res = await api.dashboard.GET_STATISCS_DATA(reactiveData.filterData)
      if (res.code === 0) {
        reactiveData.loading = false
        var list = res.data || []
        dataOperation(list)
      } else {
        reactiveData.loading = false
      }
    }
    const chartInit = async() => {
      var chartDom = document.getElementById('areaSaleChart')
      chartDom.removeAttribute('_echarts_instance_')
      var myChart = echarts.init(chartDom)
      var res = await api.dashboard.GET_STATISCS_DATA(reactiveData.filterData)
      if (res.code === 0) {
        reactiveData.loading = false
        var list = res.data || []
        dataOperation(list)
      } else {
        reactiveData.loading = false
      }
      console.log(reactiveData.option.series[0])
      // 绘制图表
      myChart.setOption(reactiveData.option)
      window.onresize = function() {
        // 自适应大小
        myChart.resize()
      }
    }
    onMounted(() => {
      chartInit()
    })
    return {
      ...toRefs(reactiveData),
      dateSelectRef,
      dateChange,
      handleMore,
    }
  },
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.areaSale-container {
  width: 100%;
  height: 100%;
  padding: 20px 0px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .chart-container {
    position: relative;
    .filter-container {
      position: absolute;
      right: 20px;
      top: -4px;
      z-index: 10;
    }
  }
}
</style>
